<template>
  <view class="container">
    <view class="header">
      <view class="logo">
        <image class="logoimg" src="/static/fanghu.png" mode=""></image>
      </view>
      <text class="welcome">欢迎回来</text>
    </view>

    <view class="form-container">
      <view class="input-group">
        <uni-icons type="phone" size="20" color="#9CA3AF" class="input-icon"></uni-icons>
        <input type="tel" @input="getmobile" placeholder="请输入手机号" class="input-field" placeholder-class="placeholder" />
      </view>

      <view class="input-group">
        <uni-icons type="locked" size="20" color="#9CA3AF" class="input-icon"></uni-icons>
        <input type="password" @input="getpassword" placeholder="请输入密码" class="input-field" placeholder-class="placeholder" />
      </view>

      <view class="forgot-password">
      </view>

      <button class="login-btn" @click="handleLogin">登 录</button>

      <view class="divider"></view>

      <view class="register">
        <text class="register-text">还没有账号？</text>
        <text class="register-link" @click="navigateToRegister">立即注册</text>
      </view>
    </view>
  </view>
</template>


<script>
import { curl } from 'common/api.js';

export default {
  data() {
    return {
      code: 'code',
      mobile: '',
      password: ''
    }
  },

  onLoad() {

  },
  methods: {
    // 返回登录
    navigateToRegister(){
      uni.navigateTo({
        url:"/pages/login/register"
      })
    },
    getmobile( e){
      this.mobile = e.detail.value;
    },
    getpassword( e){
      this.password = e.detail.value;
    },
    handleLogin(){
      var that=this;

      curl('user/login', {
        account: this.mobile,
        password: this.password
      }).then((res) => {
        console.log(res.data);

        uni.showToast({
          title:res.msg,
          icon:'none'
        });

        if (res.code==1){
          uni.setStorageSync('token', res.data.userinfo.token);
          uni.setStorageSync('user', res.data.userinfo);

          uni.reLaunch({
            url:"/pages/index/index"
          });

        }



      });
    }

  }
}
</script>

<style>


page {
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  padding: 0 32rpx;
  box-sizing: border-box;
}

.header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 128rpx;
  padding-bottom: 64rpx;
}

.logo {
  width: 150rpx;height: 150rpx;
  margin: auto;
  margin-bottom: 20px;
}
.logoimg{
  width: 150rpx;height: 150rpx;
}

.welcome {
  font-size: 28rpx;
  color: #6B7280;
}

.form-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.input-group {
  width: 100%;
  height: 96rpx;
  position: relative;
  margin-bottom: 32rpx;
}

.input-icon {
  position: absolute;
  left: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.eye-icon {
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.input-field {
  width: 100%;
  height: 100%;
  padding-left: 80rpx;
  padding-right: 80rpx;
  border: 1px solid #E5E7EB;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #111827;
  box-sizing: border-box;
}

.placeholder {
  color: #9CA3AF;
}

.forgot-password {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 48rpx;
}

.forgot-password text {
  font-size: 24rpx;
  color: #6B7280;
}

.login-btn {
  width: 100%;
  height: 96rpx;
  background-color: #4A90E2;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 8rpx;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 64rpx 0;
}

.divider-line {
  flex: 1;
  height: 1px;
  background-color: #E5E7EB;
}

.divider-text {
  padding: 0 24rpx;
  font-size: 24rpx;
  color: #6B7280;
}

.social-login {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 48rpx;
  margin-bottom: 64rpx;
}

.social-btn {
  width: 80rpx;
  height: 80rpx;
  border: 1px solid #E5E7EB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.agreement {
  width: 100%;
  margin-bottom: 64rpx;
}

.agreement-text {
  font-size: 24rpx;
  color: #6B7280;
}

.link {
  color: #4A90E2;
}

.register {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16rpx;
}

.register-text {
  font-size: 24rpx;
  color: #6B7280;
}

.register-link {
  font-size: 24rpx;
  color: #4A90E2;
}
</style>